/**
 *  2020/04/01 音乐播放器的实现思路：
 *
 *  播放操作：
 * 1.当点击音乐播放列表时，将当前的音乐列表存放在一个容器中，并记录当前播放音乐的索引值
 * 2.监听当前播放音乐的索引值，一旦发生变化，就去请求 得到音乐的url地址
 * 3.当前音乐播放完了 跳入下一首
 * 4.播放完成之后判断播放模式（单曲循环、列表循环、随机播放）
 * 如果是单曲循环 则添加 loop属性 =====>  （思路错误）
 *  当播放完成之后 在添加loop属性 已经没有任何意义了 还会导出其他模式下也是循环播放的状态
 *  解决的办法则是 设置当前的时长为0 让它回到初始状态 继续播放
 *
 *     而播放完成之后 则是进行下一首的播放  所以需要一个 next 方法 去调用
 *  next 只有两种情况 列表循环和随机播放 当去点击下一首时 此时只能是列表循环模式  所以无论如何 只要不是 随机模式 即一定为 列表循环
 *  prev 方法同上思想 只是currentPlayIndex减1
 * 如果是列表循环 则让当前的currentPlayIndex加1，需做超出判断
 * 如果是随机播放 则生成一个符合规则的随机数设置在当前的currentPlayIndex     规则：0 ~ playlist.length-1 整数
 *
 * 暂停/播放操作：
 * 默认为暂停状态，当然 如果音乐容器中没有内容是不允许显示播放器来的
 * 当音乐有url时，即设置为播放状态，此时容器中已有内容
 * 当点击暂停或播放图标时，将当前的播放状态取反向外发射通知，
 * 当父级组件收到通知后 立即 将当前播放状态 设置为子级传过来的参数
 * 并判断，如果是true 则此时需要从暂停状态 -> 播放状态 否则则相反
 * bug? 刷新后，再次点击播放 无效
 * 刷新后，默认是暂停状态，当点击播放时，因为没有url所以将会 报错： DOMException: The play() request was interrupted by a call to pause()
 * 解决方案：
 *  在mounted的时候手动调用一次获取音乐的url的请求，并设置为暂停状态
 * 因为mounted中才可以操作DOM <audio> ，另外需要注意的是图标的状态，所以采用函数回调的方式已达到暂停情况下时的图标的展示
 *
 *
 *  更新进度条（Peraent）操作：
 * audio有一个timeupdate事件（当前播放时间发生改变的时候执行）
 * 进度百分比 = 当前播放时长 / 总时长
 *
 *
 * 滑动过程中，将当前进度条的颜色设置到当前滑动的距离，以及时间
 *    错误想法
 * 如果是在播放状态下，滑动并没有结束而是没有在移动的情况下 进度条颜色会短路 bug？   解决思路：阀门  相同的还有当前时间
 * 定义一个正在滑动的布尔值变量isMove，默认为false状态 在timeupdate事件中进度条判断isMove是否为true
 * 滑动开始改变时，将isMove设置为true，滑动结束设置为false
 * true时：将不在timeupdate事件中对进度值赋值，并在滑动过程中进行赋值
 *
 *  正确想法
 * 同样是阀门的解决思路，不同点在于 改变当前时间 即等同于 改变当前进度
 *
 *  滑动结束时，拿到滑动的时间赋值给播放器上的当前时间，并判断当时是否为播放状态，进行对应时间段的播放与暂停
 *
 *
 * 播放模式的操作：
 * 因fontawesome字体图标库并不能提供完整的图标，所以采用png图片的形式
 * 对每一种图片采用不同的类 以此区分
 * 点击播放模式的使用，将该类样式设置并commit到state中
 *
 */